<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>问卷答题</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/addQuestionnaire.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin" id="app">

        <!--头部导航栏-->
        <div class="layui-header">
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <div class="layui-logo layui-hide-xs layui-icon "><strong style="font-size: 20px;">&#xe6b2;问卷调查系统</strong>
            </div>
            <ul class="layui-nav layui-layout-right">
                <li
                    class="layui-nav-item layui-hide layui-show-md-inline-block layui-show-xs-inline-block layui-show-sm-inline-block">
                    <a href="javascript:;" id="{{userId}}" class="userId">
                        <img src="../static/imgs/CE07A45DDC0071177B92422296BB0D81.png" class="layui-nav-img">
                        {{userName}}
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="" id="logout">登出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>




        <!--body内容-->
        <div class="layui-body" style="left: 0rem;">


            <!--除导航栏下的body-->
            <div class="layui-container" id="add">

                <!--left-->
                <div class=" layui-row layui-col-md1">
                    &nbsp;左
                </div>


                <!--middle-->
                <div class="layui-row layui-col-md10">

                    <!--主题标题div-->
                    <div class="h1">
                        <h1>{% raw %}{{list.themename}}{% endraw %}</h1>
                    </div>

                    <!--问候语-->
                    <div class="pTitle">
                        <p>感谢您能抽出几分钟时间来参加本次问卷，现在我们就马上开始吧!</p>
                    </div>

                    <!--问题 container-->
                    <div class="wt-container">


                        <!--题目-->
                        <div class="Issue" v-for="(item,index) in list.issueList" :id="item.issueId">

                            <div class="Issue-Text">
                                {% raw %}{{index+1}}{% endraw %}、{% raw %}{{item.isssueText}}{% endraw %}
                            </div>

                            <div class="Options" v-for='op in item.optionList'>
                                <div>
                                    <input type="radio" :name="item.isssueText" :value="op.optionText" :id="op.optionId"
                                        v-model="op.checked">{% raw %}{{op.optionText}}{% endraw %}
                                </div>
                            </div>
                        </div>

                    </div>

                    <!--提交按钮-->
                    <div class="submit">
                        <input type="button" value="&#xe609; 提交"
                            class="layui-btn layui-btn-radius layui-btn-normal layui-icon" @click="tijiao">
                            <input type="button" value="&#xe65c; 返回"
                            class="layui-btn layui-btn-radius layui-btn-normal layui-icon" @click="fh">
                    </div>
                </div>

                <!--right-->
                <div class="layui-row layui-col-md1">
                    &nbsp;右
                </div>

            </div>



        </div>

        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            <P style="text-align: center;">备案号</P>
        </div>

    </div>



    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                optionArr: [],
                list: []
            },
            mounted: function () {
                axios.get('/answerInit')
                    .then(res => {
                        res = res.data
                        this.list = res
                    })
            },
            methods: {
                tijiao: function () {
                    let list = this.list
                    this.list.issueList.forEach(item => {
                        let op = item.optionList.filter(function (op) {
                            return op.checked !== false
                        })
                        item.optionList = op
                    });
                    alert(JSON.stringify(this.list))
                    axios({
                        method: 'post',
                        url: '/answerAdd',
                        data: this.list
                    }).then(function (res) {
                        res = res.data
                        if (res.code === 200) {
                            msg = res.msg
                            alert(msg)
                        } else {
                            msg = res.msg
                            window.location.href = '/share'
                            alert(msg)
                        }
                    })
                },
                //返回按钮
                fh: function () {
                    window.location.href = '/index'
                }
            }

        })
        $('#logout').click(function () {
            axios({
                method: 'post',
                url: '/logout',
            }).then(function (res) {
                res = res.data
                if (res.code === 200) {
                    window.location.href = '/'
                }
            })
        })
    </script>


</body>

</html>